<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/list.css">
    <link rel="shortcut icon" type="image/x-icon" href="./imgs/favicon.png">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="list-header flex">
            <form action="" class="flex">
                <img src="./imgs/icon-home.png" alt="">
                <div class="inner flex">
                    <input value="PHP" placeholder="搜索职位" type="text">
                    <span>&times;</span>
                </div>
                <button>搜索</button>
            </form>
        </div>
        
        <!-- 过滤器 -->
        <div class="filter flex">
            <dl class="active1">
                <dt>经验</dt>
                <dd>
                    <ul>
                        <li class="active">不限</li>
                        <li>应届生</li>
                        <li>1年以内</li>
                        <li>1-3年</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt>经验</dt>
                <dd>
                    <ul>
                        <li>不限</li>
                        <li>应届生</li>
                        <li>1年以内</li>
                        <li>1-3年</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt>经验</dt>
                <dd>
                    <ul>
                        <li>不限</li>
                        <li>应届生</li>
                        <li>1年以内</li>
                        <li>1-3年</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt>经验</dt>
                <dd>
                    <ul>
                        <li>不限</li>
                        <li>应届生</li>
                        <li>1年以内</li>
                        <li>1-3年</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt>经验</dt>
                <dd>
                    <ul>
                        <li>不限</li>
                        <li>应届生</li>
                        <li>1年以内</li>
                        <li>1-3年</li>
                    </ul>
                </dd>
            </dl>
        </div>

        <!-- 招聘列表 -->
        <ul class="job-list">
            <li>
                <a href="./detail.html" class="job-item flex">
                    <img src="./imgs/list-logo.jpg" alt="">
                    <div class="text">
                        <div class="title flex">
                            PHP后端开发工程师
                            <span class="salary">15-30K</span>
                        </div>
                        <div class="company">
                            酷狗音乐
                        </div>
                        <div class="props">
                            <span>广州</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </a>
                <hr>
            </li>
            <li>
                <a href="" class="job-item flex">
                    <img src="./imgs/list-logo.jpg" alt="">
                    <div class="text">
                        <div class="title flex">
                            PHP后端开发工程师
                            <span class="salary">15-30K</span>
                        </div>
                        <div class="company">
                            酷狗音乐
                        </div>
                        <div class="props">
                            <span>广州</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </a>
                <hr>
            </li>
            <li>
                <a href="" class="job-item flex">
                    <img src="./imgs/list-logo.jpg" alt="">
                    <div class="text">
                        <div class="title flex">
                            PHP后端开发工程师
                            <span class="salary">15-30K</span>
                        </div>
                        <div class="company">
                            酷狗音乐
                        </div>
                        <div class="props">
                            <span>广州</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </a>
                <hr>
            </li>
            <li>
                <a href="" class="job-item flex">
                    <img src="./imgs/list-logo.jpg" alt="">
                    <div class="text">
                        <div class="title flex">
                            PHP后端开发工程师
                            <span class="salary">15-30K</span>
                        </div>
                        <div class="company">
                            酷狗音乐
                        </div>
                        <div class="props">
                            <span>广州</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </a>
                <hr>
            </li>
            <li>
                <a href="" class="job-item flex">
                    <img src="./imgs/list-logo.jpg" alt="">
                    <div class="text">
                        <div class="title flex">
                            PHP后端开发工程师
                            <span class="salary">15-30K</span>
                        </div>
                        <div class="company">
                            酷狗音乐
                        </div>
                        <div class="props">
                            <span>广州</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </a>
                <hr>
            </li>
            <li>
                <a href="" class="job-item flex">
                    <img src="./imgs/list-logo.jpg" alt="">
                    <div class="text">
                        <div class="title flex">
                            PHP后端开发工程师
                            <span class="salary">15-30K</span>
                        </div>
                        <div class="company">
                            酷狗音乐
                        </div>
                        <div class="props">
                            <span>广州</span>
                            <span>3-5年</span>
                            <span>本科</span>
                        </div>
                    </div>
                </a>
                <hr>
            </li>
        </ul>
    </div>
</body>
</html>